<template>
  <div class="common-post">
    <div v-if="postData.length > 0">
      <div
        class="common-post-item"
        v-for="item in postData"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <div class="item-avatar">
          <el-image
            :src="item.avatar || defaultAvatar"
            class="avatar"
          ></el-image>
        </div>
        <div class="item-content">
          <div class="title">{{ item.postTitle }}</div>
          <div class="content">
            <div class="info">
              {{ item.userName }} ·
              <span>{{ daysUntilDate(item.createTime) }}</span>
            </div>
            <i class="el-icon-chat-round"
              ><span>{{ item.postNum }}</span></i
            >
          </div>
        </div>
      </div>
    </div>
    <div class="empty" v-else>
      <el-empty :description="empty" style="height: 100%"></el-empty>
    </div>
  </div>
</template>

<script>
import defaultAvatar from "@/assets/default.jpg";
export default {
  name: "CommonPostItemView",
  props: ["empty", "postData"],
  data() {
    return {
      defaultAvatar,
    };
  },
  methods: {
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 计算距离今天的天数
    daysUntilDate(time) {
      const today = new Date();
      const givenDate = new Date(this.formatDate(time));
      // 将时间设置为0点0分0秒，保证计算的是整天数
      givenDate.setHours(0, 0, 0, 0);
      const diffTime = today - givenDate;
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
      return diffDays < 1 ? "今天" : diffDays + "天前";
    },
    // 查看帖子详情
    toDetail(id) {
      this.$router.push({
        path: `/bbs/detail/${id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.common-post {
  margin-left: 20px;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  .common-post-item {
    width: 100%;
    height: 80px;
    display: flex;
    border-left: 2px solid rgb(255, 255, 255);
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(134, 142, 150, 0.2);
    .item-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      .avatar {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }
    .item-content {
      margin-left: 14px;
      width: 100%;
      height: 100%;
      .title {
        width: 100%;
        height: 50%;
        line-height: 46px;
        font-size: 17px;
      }
      .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-right: 10px;
        color: rgba(134, 142, 150, 0.8);
        .info {
          color: #868e96;
          font-weight: 700;
          font-size: 15px;
          span {
            font-weight: 400;
          }
        }
        i {
          font-size: 15px;
          span {
            margin-left: 2px;
          }
        }
      }
    }
    &:hover {
      border-left: 2px solid rgb(0, 132, 255);
      background-color: rgb(241, 241, 241);
    }
  }
  .empty {
    height: 240px;
  }
}
</style>